<template>
	<view class="roc-see-image">
		<u-popup :show="show" @close="handleClose" mode="center" :closeable="true" round="20" :closeOnClickOverlay="false">
			<view class="popup-main u-p-20">
				<view class="popup-title">图片</view>
				<scroll-view scroll-y="true" class="images-cont" v-if="imageList.length">
					<view
						class="img-box"
						v-for="(url, urlIndex) in imageList"
						:key="urlIndex"
						@click="previewOpen(url)"
					>
						<u--image class="u-img" :src="url" mode="widthFix" width="100%" height="336"></u--image>
					</view>
				</scroll-view>
				<view v-if="!imageList.length" class="empty-text">暂无图片~</view>
				<!-- 图片预览 -->
				<preview-image ref="previewImage" :imgs="imageList"></preview-image>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getUploadUrlList } from '@/api/dataAccess.js';
import { baseUrl } from '@/api/config.js';

export default {
	name: 'roc-see-image',
	data() {
		return {
			show: false,
			imageList: []
		};
	},
	methods: {
		// 打开预览
		previewOpen(url) {
			this.$refs.previewImage.open(url);
		},
		handleClose() {
			this.show = false;
		},
		async handleOpen(row, modelDetail) {
			const sendObj = {
				code: modelDetail.code,
				duw1mcpd9pmvh: row.rawid
			};
			const {
				data: { data }
			} = await getUploadUrlList(sendObj);
			if (data.length) {
				// 图片数据处理
				this.imageList = data
					.filter(item => {
						return item.rrq1mcpdb3cxa;
					})
					.map(item => {
						return `${baseUrl}${item.rrq1mcpdb3cxa.substring(1)}`;
						// 测试看效果
						// return `https://tianshui.ciciiot.com/${item.rrq1mcpdb3cxa.substring(1)}`;
					});
			} else {
				this.imageList = [];
			}
			this.show = true;
		}
	}
};
</script>

<style lang="scss">
.roc-see-image {
	width: 100%;
	.popup-main {
		width: 600rpx;
		.popup-title {
			font-size: 30rpx;
			text-align: center;
			line-height: 2;
			padding-bottom: 10rpx;
		}
		.images-cont {
			height: 1000rpx;
			.img-box {
				margin-bottom: 10rpx;
			}
		}
		.empty-text {
			color: #666;
			padding: 60rpx 0;
			text-align: center;
		}
	}
}
</style>
